﻿@using ZBJF.Warranty.Common.Enums.InsuranceWarranty
@using ZBJF.Warranty.WebProvider
@using ZBJF.Warranty.Common.Enums
@{
    ViewBag.Title = "Index";
}
@section Header{
    @Scripts.Render("~/bundles/datatable")
    @Styles.Render("~/Content/datatable")
}
<link href="~/Content/css/chat.css?v=11" rel="stylesheet" />
@model ZBJF.Warranty.Model.ViewModel.Udesk.CustomerInfoModel
<ul class="nav nav-tabs">
    <li class="active"><a>客户列表</a></li>
</ul>
    <table style="margin: 20px;">
        <tr>
            <td>客户姓名:</td>
            <td>@Html.TextBoxFor(n => n.Nick_name, new {@class = "input-small"})</td>
            <td>联系电话:</td>
            <td>@Html.TextBoxFor(n => n.Cellphones, new { @class = "input-small" })</td>
            <td>邮箱:</td>
            <td>@Html.TextBoxFor(n => n.Email, new {@class = "input-small"})</td>
            <td>
                    <input id="btnSubmit" class="btn btn-primary Search-R" type="button" value="查询" onclick="search();">
            </td>
          </tr>
    </table>
<div class="table-responsive dataTables_wrapper">
    <table id="customerInfoList" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th width="20">序号</th>
            <th width="100">客户姓名</th>
            <th width="100">邮箱</th>
            <th width="100">联系电话</th>
            <th width="100">负责客服</th>
            <th width="100">客户来源</th>
            <th width="100">操作</th>
        </tr>
        </thead>
    </table>
</div>
<input type="hidden" value="" id="udeskID"/><!--聊天记录-->
<input type="hidden" value="" id="CurrentUdeskID" /><!--关联报案工单-->
<!--聊天记录 top:50%;left:50%; margin-left: -260px; margin-top:-260px;  style="display:none"-->
<div class="chatRecord" id="chatRecordContent">
    <div class="recordTitle">
        <span style="margin-left: 20px;"> 与 <span class="name"></span> 的聊天记录</span>
        <span class="opera">+</span>
    </div>
    <div class="recordContent" id="chatContent">
        <ul></ul>
    </div>

    <div class="searchChatRecord">
        <ul style="float: left;">
            <li class="imageChoose">
                素材选取
            </li>
            <li>
                最近时间：
                <select id="TimeRange">
                    <option value="100" selected>一个月</option>
                    <option value="200">两个月</option>
                    <option value="300">三个月</option>
                </select>
            </li>
            <li>
                类型：
                <select id="contentType">
                    <option value="" selected>全部</option>
                    <option value="message">文本</option>
                    <option value="image">图片</option>
                </select>
            </li>
            <li>
                内容：<input type="text" class="input-small" id="content"/>
            </li>
            <li>
                <input type="button" id="searchBtn" class="btn btn-primary Search-R margin-l-3" value="查询"/>
            </li>
        </ul>
        <ul style="float: right; margin-right: 10px;" id="pageContainer"></ul>
    </div>
</div>
<!--素材选取框-->
<div class="chatRecord" id="imgChooseContent">
    <div class="recordTitle">
        <span style="margin-left: 20px;">资料选取</span>
        <span class="opera">+</span>
    </div>

    <div class="recordContent" id="imgContent">
        <ul style="display: inline">
            <li class="imgContentItem ">
                <div>
                    <img src="/UploadFile/File/workOrder/2018/1/9/oauli1aOszYkXEGiGipjLNfN2MnE/201801090542210456.jpg"/>
                </div>
            </li>
        </ul>
    </div>

    <div class="searchChatRecord">
        <ul class="operationContent">
            <li id="connectOrderBtn">
                关联报案工单
            </li>
            <li id="selectAllImg">
                全选
            </li>
        </ul>
        <ul style="float: right; margin-right: 10px;" id="pageContainer1"></ul>
    </div>
</div>
<!--报案工单资料收集框-->
<div class="chatRecord" id="connectOrderContent">
    <div class="recordTitle">
        <span style="margin-left:20px;">关联报案单号</span>
        <span class="opera">+</span>
    </div>

    <div class="recordContent" id="orderContent">
        <div>
            <span>
                报案单号：
                <select id="warrantyRecordNo" style="width:126px;"></select>
            </span>
            <span>
                资料类型：
                @Html.DropDownListFor(m => m.FileinfoType, ConvertToSelector.Instance.EnumTypeConvertToSelectList(typeof(WarrantyRecordImageEnums)), new { validate = "{required:true,messages:{required:'请选择资料类型'}}" })
            </span>
            <span>
                <input type="button" value="提交" id="submitOrderConnect" class="btn btn-primary Edit-R margin-l-10" />
            </span>
        </div>
        <ul style="display:inline"></ul>
    </div>
</div>
<!--弹框__关联工单号-->
<div class="layui-layer layui-layer-page" id="associatedWarrantyRecordNo" style="z-index: 999;display:none; width: 430px; height:260px; top:0; left: 0;right:0;bottom:0;margin:auto;">
    <div class="layui-layer-title">关联报案单号</div>
    <div id="" class="layui-layer-content">
        <div class="layim-add-box">
            <div class="layim-add-img">
                <span class="inputTitle">用户名：</span>
                <span id="associatedWarrantyRecordNoUserName">小熊</span>
            </div>
            <div class="layim-add-img">
                <span class="inputTitle">已有报案单号：</span>
                <span><textarea id="areaHasOrder" readonly="readonly"></textarea></span>
            </div>
            <div class="layim-add-img">
                <span class="inputTitle">报案单号：</span>
                <span><input type="text" class="input-big" id="WarrantyRecordNo" /></span>
            </div>
        </div>
    </div>
    <span class="layui-layer-setwin">
        <a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" onclick="javascript: $('#associatedWarrantyRecordNo').hide();"></a>
    </span>
    <div class="layui-layer-btn layui-layer-btn-">
        <a class="layui-layer-btn0" id="addWarrantyRecordNoBtn">确认</a>
        <a class="layui-layer-btn1" id="cancelWarrantyRecordNoBtn">取消</a>
    </div>
</div>
@section scripts{
    <script src="~/Content/js/moment.js"></script>
    <script src="~/Content/js/paging.js?v=1"></script>
    <link href="~/Content/css/paging.css" rel="stylesheet"/>
    <script type="text/javascript">
        $(function() {
            var objTable = $("#customerInfoList")
                .dataTable({
                    fnDrawCallback: function() {
                        ControlPermissionOperate();
                    },
                    "aaSorting": [[9, "desc"]],
                    "sAjaxSource": "/Udesk/Index",
                    aoColumns: [
                        {
                            "mData": null,
                            "bSortable": false,
                            "fnRender": function(nRow) {
                                return nRow.iDataRow + 1;
                            }
                        },
                        { "mData": "Nick_name", "bSortable": false },
                        { "mData": "Email", "bSortable": false },
                        { "mData": "Cellphones", "bSortable": false },
                        { "mData": "ServiceName", "bSortable": false },
                        { "mData": "Source_channel", "bSortable": false },
                        { "mData": null, "bSortable": false }
                    ],
                    "fnRowCallback": function(nRow, aData) {
                        var html = "<a class='Edit-R associatedWarrantyRecordNo' udeskID='" + aData.UdeskID + "' name='" + aData.Nick_name + "' href='#' title='关联报案工单'>关联报案工单</i></a>";
                        html += "| <a class='Edit-R Udesk' udeskID='" + aData.UdeskID + "'name='" + aData.Nick_name + "' href='#' title='聊天记录'>聊天记录</i></a>";
                        $('td:eq(6)', nRow).html(html);
                    }
                });
            //--------------------------------------聊天记录 start-------------------------
            var chatRecordPage = "";
            //聊天记录框
            $(document).on("click", ".Udesk", function() {
                var udeskID = $(this).attr("udeskID");
                var name = $(this).attr("name");
                $(".name").html(name);
                $("#udeskID").val(udeskID);
                //设置内容框的高度
                var _contentHeight = $("#chatRecordContent").height();
                $("#chatContent").css("height", _contentHeight - 100 + "px");
                chatRecordPage = new Paging();
                chatRecordPage.pagingInit(
                    _container = "#chatContent ul",
                    _pageContainer = "#pageContainer",
                    _url = "/Udesk/GetChatRecord",
                    _pageSize = 30,
                    _params = function() {
                        return { UdeskID: $("#udeskID").val(), TimeRange: $("#TimeRange option:selected").val(), contentType: $("#contentType option:selected").val(), content: $.trim($("#content").val()) };
                    },
                    _callback = function(data) {
                        var _html = "";
                        data.forEach(function(item, index, array) {
                            var _name = item.Nick_name;
                            //100:客户消息
                            if (item.sender == 100) {
                                debugger;
                                _html += buildCustomerMessage(item.content, item.contentType, item.created_at, _name, "");
                            } //200：客服消息
                            else if (item.sender == 200) {
                                _html += buildServiceMessage(item.content, item.contentType, item.created_at, item.Aliase);
                            }
                        })
                        return _html;
                    }
                );
                chatRecordPage.pagingStart();

                $("#imgChooseContent").hide();
                $("#connectOrderContent").hide();
                $("#chatRecordContent").show();
            })
            //聊天记录框
            $(document).on("click", ".opera", function() {
                $(this).parents(".chatRecord").hide();
                $(".maskContent").hide();
            })
            //查询
            $("#searchBtn").on("click", function() {
                chatRecordPage.pageSearch();
            })
            var imgRecordPage = "";
            //素材选取
            $(".imageChoose").on("click", function() {
                $("#imgChooseContent").show();
                //设置内容框的高度
                var _contentHeight = $("#imgChooseContent").height();
                $("#imgContent").css("height", _contentHeight - 100 + "px");
                imgRecordPage = new Paging();
                imgRecordPage.pagingInit(
                    _container = "#imgContent ul",
                    _pageContainer = "#pageContainer1",
                    _url = "/Udesk/GetChatRecord",
                    _pageSize = 10,
                    _params = function() {
                        return { UdeskID: $("#udeskID").val(), contentType: "image" };
                    },
                    _callback = function(data) {
                        var _html = "";
                        data.forEach(function(item, index, array) {
                            _html += '<li class="imgContentItem ">';
                            _html += ' <div>';
                            _html += ' <img src="' + item.content + '"  ChatDetailID="' + item.ID + '" />';
                            _html += ' </div>';
                            _html += ' </li>';
                        })
                        return _html;
                    });

                imgRecordPage.pagingStart({ UdeskID: $("#udeskID").val(), contentType: "image" });
            })
            //--------------------------------------聊天记录 end-------------------------


            //-----------------------------------聊天图片列表 start-----------------------

            //选择图片
            $(document).on("click", "#imgContent ul li", function() {
                if ($(this).hasClass("borderSelected"))
                    $(this).removeClass().addClass("imgContentItem");
                else
                    $(this).removeClass().addClass("borderSelected");
            })
            //全选图片
            $("#selectAllImg").on("click", function() {
                if ($.trim($(this).html()) == "全选") {
                    $("#imgContent ul li").removeClass().addClass("borderSelected");
                    $(this).html("取消全选");
                } else {
                    $("#imgContent ul li").removeClass().addClass("imgContentItem");
                    $(this).html("全选");
                }
            })
            //关联报案工单按钮点击
            $("#connectOrderBtn").on("click", function() {
                //获取所有选中的图片li
                var selectedLi = $("#imgContent ul li[class='borderSelected']").clone();
                if (selectedLi.length < 1) {
                    alert("至少选择一张图片");
                    return;
                }
                var udeskID = $("#udeskID").val();
                //1、查询报案单号
                $.ajax({
                    url: "/Udesk/GetUserReportNumber",
                    dataType: "json",
                    type: "GET",
                    async: false,
                    data: { customer_id: udeskID },
                    success: function(data) {
                        if (!data.Result) {
                            alert(data.Message);
                            return;
                        }
                        var _option = "";
                        var index = 0;
                        data.Data.forEach(function(itemNo) {
                            if (index == 0)
                                _option += "<option dataId='" + itemNo.ID + "' value='" + moment(itemNo.CreateTime).format('YYYY-MM-DD HH:mm:ss') + "' selected>" + itemNo.WarrantyRecordNo + "</option>";
                            else
                                _option += "<option dataId='" + itemNo.ID + "' value='" + moment(itemNo.CreateTime).format('YYYY-MM-DD HH:mm:ss') + "'>" + itemNo.WarrantyRecordNo + "</option>";
                            index++;
                        })
                        $("#warrantyRecordNo").html(_option);
                    }
                });

                selectedLi.css("border", "1.5px #5FB878 solid");
                $("#orderContent ul").html(selectedLi);
                $("#connectOrderContent").show();
                $(".maskContent").show();
            })
            //-----------------------------------聊天图片列表 end-------------------------
            //图片
            $(document).on("click", ".mineMessageText img", function() {
                window.open($(this).attr("src"));
            })
            //--------------------------------------关联报案工单 start-------------------------
            //关联报案工单框
            $(document).on("click", ".associatedWarrantyRecordNo", function() {
                var udeskID = Number($(this).attr("udeskID"));
                var name = $(this).attr("name");
                $("#CurrentUdeskID").val(udeskID);
                $("#WarrantyRecordNo").val("");
                $("#areaHasOrder").html("");
                $("#associatedWarrantyRecordNoUserName").html(name);
                $.ajax({
                    url: "/Udesk/GetUserOrderList",
                    dataType: "json",
                    type: "GET",
                    data: { customer_id: udeskID },
                    success: function(data) {
                        if (data.Result) {
                            var orderList = "";
                            data.Data.forEach(function(item) {
                                orderList += item.WarrantyRecordNo + "\r\n";
                            })
                            $("#areaHasOrder").html(orderList);
                        }
                    }
                });
                $("#associatedWarrantyRecordNo").show();
            })
            //关闭弹框——关联报案单号
            $("#cancelWarrantyRecordNoBtn").on("click", function() {
                $("#associatedWarrantyRecordNo").hide();
                $("#WarrantyRecordNo").val("");
            })
            //提交数据--关联报案单号
            $("#addWarrantyRecordNoBtn").on("click", function() {
                $(this).attr('disabled', "true");
                var _data = {};
                _data.customer_id = $.trim($("#CurrentUdeskID").val());
                _data.WarrantyRecordNo = $.trim($("#WarrantyRecordNo").val());
                if (!_data.customer_id || !_data.WarrantyRecordNo) {
                    alert("请填写报案单号！");
                    $(this).removeAttr('disabled');
                    return;
                }
                $.ajax({
                    url: "/Udesk/AssociatedWarrantyRecordNo",
                    dataType: "json",
                    type: "GET",
                    data: _data,
                    success: function(data) {
                        $("#addWarrantyRecordNoBtn").removeAttr('disabled');
                        alert(data.Message);
                        if (data.Result) {
                            $("#associatedWarrantyRecordNo").hide();
                            search();
                        }
                    }
                });
            })

            //关联报案工单提交数据
            $("#submitOrderConnect").on("click", function() {
                $(this).attr('disabled', "true");
                var _data = {};
                _data.udeskID = $.trim($("#udeskID").val());
                _data.WarrantyRecordNo = $.trim($("#warrantyRecordNo option:selected").html());
                _data.CreateTime = $.trim($("#warrantyRecordNo option:selected").val());
                _data.ID = $.trim($("#warrantyRecordNo option:selected").attr("dataId"));
                _data.FileinfoType = $.trim($("#FileinfoType option:selected").val());
                _data.ImagesUrl = [];
                _data.ChatDetailID = [];
                var images = $("#orderContent ul li div img");

                if (!images || images.length < 1) {
                    alert("至少选择一张图片！");
                    $(this).removeAttr('disabled');
                    return;
                }
                for (var i = 0, j = images.length; i < j; i++) {
                    _data.ImagesUrl.push($(images[i]).attr("src"));
                    _data.ChatDetailID.push($(images[i]).attr("ChatDetailID"));
                }

                if (!_data.udeskID) {
                    alert("参数错误！");
                    $(this).removeAttr('disabled');
                    return;
                }
                if (!_data.WarrantyRecordNo) {
                    alert("请选择报案单号！");
                    $(this).removeAttr('disabled');
                    return;
                }
                if (!_data.FileinfoType) {
                    alert("请选择资料类型！");
                    $(this).removeAttr('disabled');
                    return;
                }
                if (!_data.ImagesUrl || _data.ImagesUrl.length < 1) {
                    alert("至少选择一张图片！");
                    $(this).removeAttr('disabled');
                    return;
                }

                $.ajax({
                    url: "/Udesk/CollectData",
                    dataType: "json",
                    type: "POST",
                    async: false,
                    data: _data,
                    success: function(data) {
                        $("#submitOrderConnect").removeAttr('disabled');
                        alert(data.Message);
                        if (data.Result) {
                            $("#connectOrderContent").hide();
                            $(".maskContent").hide();
                        }
                    }
                });
            })
        });

        //--------------------------------------关联报案工单 end-------------------------
        function search() {
            /*给查询对象赋值*/
            queryParamList.Nick_name = $("#Nick_name").val().trim();
            queryParamList.Email = $("#Email").val().trim();
            queryParamList.Cellphones = $("#Cellphones").val().trim();
            $("#customerInfoList").dataTable().fnDraw();
        }
        //拼接客户消息
        function buildCustomerMessage(content, contentType, Time, nickName, logo) {
            var messageContent = "";
            var message = content;
            if (contentType == "image") {
                message = "<img src='" + content + "' style='width:100%;border-radius:none;' >";
            } else if (contentType == "audio") {
                message = '<audio src="' + content + '" controls preload="none"></audio>';
            }   
            messageContent += '    <li class="targetMessage">';
            messageContent += '       <div>';
            messageContent += '<img src="../Images/3.jpg" title="头像" />';
            messageContent += '         </div>';
            messageContent += '          <div style="margin-left:15px;">';
            messageContent += '            <span class="name">' + nickName + '</span>';
            messageContent += '             <span>' + moment(Time).format('YYYY-MM-DD HH:mm') + '</span>';
            messageContent += '              <div class="mineMessageDiv">';
            messageContent += '                   <div class="sanjiao"></div>';
            messageContent += '                   <div class="mineMessageText">';
            messageContent += message;
            messageContent += '                   </div>';
            messageContent += '                </div>';
            messageContent += '            </div>';
            messageContent += '      </li>';
            return messageContent;
        }

        //拼接客服消息
        function buildServiceMessage(content, contentType, Time, nickName) {
            var message = content;
            if (contentType == "image") {
                message = "<img src='" + content + "' style='width:100%;border-radius:none;' >";
            } else if (contentType == "audio") {
                message = '<audio src="' + content + '" controls preload="none"></audio>';
            }
            var _html = '<li class="mineMessage">';
            _html += '   <div>';
            _html += '            <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" title="头像" />';
            _html += '        </div>';
            _html += '       <div style="margin-right:15px;">';
            _html += '           <span>' + moment(Time).format('YYYY-MM-DD HH:mm') + '</span>';
            _html += '            <span>' + nickName + '</span>';
            _html += '           <div class="mineMessageDiv">';
            _html += '                <div class="sanjiao"></div>';
            _html += '                <div class="mineMessageText">';
            _html += message;
            _html += '               </div>';
            _html += '            </div>';
            _html += '        </div>';
            _html += '   </li>';
            return _html;
        }

        //滚动条滚到最下面
        function scrollTop(_element) {
            //自动滑倒滚动条最下面
            var jsdiv = _element[0];
            jsdiv.scrollTop = jsdiv.scrollHeight;
        }
    </script>
}